<template>
  <div class="app-container home">
    <!-- <el-row :gutter="20">
      <el-col :sm="24" :lg="24">

      </el-col>
    </el-row> -->

    <!-- <el-divider /> -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="schedule-card">
          <div slot="header" class="clearfix">
            <span>今日行程</span>
            <el-button v-if="todaySchedule.length === 0" style="float: right; padding: 3px 0"
              type="text">暂无行程</el-button>
          </div>
          <el-collapse accordion>
            <el-collapse-item v-for="item in todaySchedule" :key="item.orderId">
              <template slot="title">
                <el-tag size="mini" :type="getTypeTag(item.type)" class="schedule-tag">
                  {{ getTypeName(item.type) }}
                </el-tag>
                <div style="width: 20px;"></div>
                <el-tag size="mini" :type="getStatusTag(item.status)">
                  {{ getStatusName(item.status) }}
                </el-tag>
                <div style="width: 20px;"></div>
                {{ item.stationName }}
              </template>
              <div class="schedule-detail">
                <p>
                  预约类型：{{ getTypeName(item.type) }}
                </p>
                <p>
                  用车时间：{{ parseTime(item.arrivalTime) }}
                </p>
                <p>
                  车站名称：{{ item.stationName }}
                </p>
                <p v-if="item.type == 2">
                  房间编号：{{ item.roomNo }}
                </p>
                <p v-if="item.type == 1">
                  入住时间：{{ item.bookingTime }}
                </p>
                <p>
                  出行人数：{{ item.personCount }}人
                </p>
                <p>
                  乘客姓名：{{ item.username }}
                </p>
                <p>
                  联系方式：{{ item.phone }}
                </p>
                <p>
                  备注信息：{{ item.remark }}
                </p>
                <p>
                  行程状态：
                  <el-tag size="mini" :type="getStatusTag(item.status)">
                    {{ getStatusName(item.status) }}
                  </el-tag>
                </p>
                <div class="schedule-actions">
                  <el-button type="text" size="mini" @click.stop="handleViewDetail(item.id, 'today')">查看详情</el-button>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="schedule-card">
          <div slot="header" class="clearfix">
            <span>明日行程</span>
            <el-button v-if="tomorrowSchedule.length === 0" style="float: right; padding: 3px 0"
              type="text">暂无行程</el-button>
          </div>
          <el-collapse accordion>
            <el-collapse-item v-for="item in tomorrowSchedule" :key="item.orderId">
              <template slot="title">
                <el-tag size="mini" :type="getTypeTag(item.type)" class="schedule-tag">
                  {{ getTypeName(item.type) }}
                </el-tag>
                <div style="width: 20px;"></div>
                <el-tag size="mini" :type="getStatusTag(item.status)">
                  {{ getStatusName(item.status) }}
                </el-tag>
                <div style="width: 20px;"></div>
                {{ item.stationName }}
              </template>
              <div class="schedule-detail">
                <p>
                  预约类型：{{ getTypeName(item.type) }}
                </p>
                <p>
                  用车时间：{{ parseTime(item.arrivalTime) }}
                </p>
                <p>
                  车站名称：{{ item.stationName }}
                </p>
                <p v-if="item.type == 2">
                  房间编号：{{ item.roomNo }}
                </p>
                <p v-if="item.type == 1">
                  入住时间：{{ item.bookingTime }}
                </p>
                <p>
                  出行人数：{{ item.personCount }}人
                </p>
                <p>
                  乘客姓名：{{ item.username }}
                </p>
                <p>
                  联系方式：{{ item.phone }}
                </p>
                <p>
                  备注信息：{{ item.remark }}
                </p>
                <p>
                  行程状态：
                  <el-tag size="mini" :type="getStatusTag(item.status)">
                    {{ getStatusName(item.status) }}
                  </el-tag>
                </p>
                <div class="schedule-actions">
                  <el-button type="text" size="mini"
                    @click.stop="handleViewDetail(item.id, 'tomorrow')">查看详情</el-button>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="schedule-card">
          <div slot="header" class="clearfix">
            <span>订单消息(近7日)</span>
            <el-button v-if="orderList.length === 0" style="float: right; padding: 3px 0" type="text">暂无订单</el-button>
          </div>
          <el-collapse accordion>
            <el-collapse-item v-for="item in orderList" :key="item.orderId">
              <template slot="title">
                <el-tag size="mini" :type="getOrderStatusTag(item.status)">
                  {{ getOrderStatusName(item.status) }}
                </el-tag>
              </template>
              <div class="schedule-detail">
                <p>
                  下单时间：{{ parseTime(item.orderTime) }}
                </p>
                <p>
                  客户姓名：{{ item.user.username }}
                </p>
                <p>
                  客户电话：{{ item.user.userPhone }}
                </p>
                <p>
                  订单总价：￥{{ item.total }}
                </p>
                <p>
                  订单状态：
                  <el-tag size="mini" :type="getStatusTag(item.status)">
                    {{ getOrderStatusName(item.status) }}
                  </el-tag>
                </p>
                <div class="schedule-actions">
                  <el-button type="text" size="mini"
                    @click.stop="handleViewOrderDetail(item.id, 'day7')">查看详情</el-button>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listBooking } from "@/api/hotel/booking";
import { listOrder } from "@/api/hotel/order";
import { parseTime } from "@/utils/ruoyi";

export default {
  name: "Index",
  data() {
    return {
      todaySchedule: [],
      tomorrowSchedule: [],
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        status: null,
      },
      orderList: [],
      orderQueryParams: {
        pageNum: 1,
        pageSize: 100,
        status: null,
      }
    };
  },
  created() {
    this.getScheduleData();
    this.getOrderList();
    // 监听刷新消息事件
    this.$bus.$on('refresh-message-data', () => {
      this.getScheduleData();
      this.getOrderList();
    });
  },
  methods: {
    async getScheduleData() {
      try {
        // 获取今天的开始和结束时间
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        const tomorrow = new Date(today);
        tomorrow.setDate(tomorrow.getDate() + 1);
        const nextTomorrow = new Date(today);
        nextTomorrow.setDate(nextTomorrow.getDate() + 2);

        this.queryParams.params = {};
        this.queryParams.params["beginArrivalTime"] = parseTime(today);
        this.queryParams.params["endArrivalTime"] = parseTime(tomorrow);

        listBooking(this.queryParams).then(response => {
          this.todaySchedule = response.rows;
        });
        this.queryParams.params["beginArrivalTime"] = parseTime(tomorrow);
        this.queryParams.params["endArrivalTime"] = parseTime(nextTomorrow);
        listBooking(this.queryParams).then(response => {
          this.tomorrowSchedule = response.rows;
        });

      } catch (error) {
        console.error('获取行程数据失败:', error);
      }
    },
    getTypeTag(type) {
      const tags = {
        '1': 'primary',  // 单程
        '2': 'success',  // 往返
      };
      return tags[type] || 'info';
    },
    getTypeName(type) {
      const types = {
        '1': '预约接站',
        '2': '预约送站',
      };
      return types[type] || '未知';
    },
    getStatusTag(status) {
      const tags = {
        '1': 'warning',   // 待出行
        '4': 'primary',   // 进行中
        '2': 'success',   // 已完成
        '3': 'info',    // 已取消
        '5': 'primary',   // 进行中
      };
      return tags[status] || 'info';
    },
    getStatusName(status) {
      const statuses = {
        '1': '待出行',
        '4': '已确认',
        '2': '已完成',
        '3': '已取消',
        '5': '已出发',
      };
      return statuses[status] || '未知';
    },
    getOrderStatusTag(status) {
      const tags = {
        '1': 'warning',   // 待出行
        '4': 'primary',   // 进行中
        '2': 'success',   // 已完成
        '3': 'info',    // 已取消
      };
      return tags[status] || 'info';
    },
    getOrderStatusName(status) {
      const statuses = {
        '1': '已下单',
        '4': '已接单',
        '2': '已完成',
        '3': '已取消',
      };
      return statuses[status] || '未知';
    },

    handleViewDetail(bookId, type) {
      this.$router.push({
        path: '/rongshe/booking',
        query: {
          type: type,
          bookId: bookId
        }
      });
    },
    handleViewOrderDetail(orderId, type) {
      this.$router.push({
        path: '/rongshe/order',
        query: {
          type: type,
          orderId: orderId
        }
      });
    },
    async getOrderList() {
      try {
        //获取今日时间 yyyy-MM-dd 字符串
        let today = new Date();
        let start = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
        start = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();
        //获取明天日期 yyyy-MM-dd 字符串
        let end = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
        end = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate();
        this.orderQueryParams.params = {};
        this.orderQueryParams.params["beginOrderTime"] = parseTime(start);
        this.orderQueryParams.params["endOrderTime"] = parseTime(end);

        listOrder(this.orderQueryParams).then(response => {
          this.orderList = response.rows;
        });
      } catch (error) {
        console.error('获取订单列表失败:', error);
      }
    },
    beforeDestroy() {
      // 组件销毁前移除事件监听
      this.$bus.$off('refresh-message-data');
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans",
  "Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.schedule-card {
  .schedule-tag {
    margin-left: 10px;
  }

  .schedule-detail {
    padding: 10px;
    background-color: #f8f8f8;
    border-radius: 4px;

    p {
      margin: 8px 0;
      color: #606266;

      i {
        margin-right: 5px;
        width: 16px;
        color: #909399;
      }
    }
  }

  .schedule-actions {
    margin-top: 10px;
    text-align: right;
  }

  ::v-deep .el-collapse-item__header {
    .el-icon-time {
      color: #E6A23C;
    }

    .el-icon-loading {
      color: #409EFF;
    }

    .el-icon-success {
      color: #67C23A;
    }

    .el-icon-error {
      color: #F56C6C;
    }
  }
}
</style>
